<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: '#fff' }"
      border-bottom
      id="nav-bar"
      title="关于我们"
    ></u-navbar>

    <view class="content section-0">
      <image
        class="logo"
        src="/static/images/logo.png"
        mode="widthFix"
      >
      </image>
      <view class="label">当前版本号</view>
      <view class="value">{{ version }}</view>
    </view>
    <view class="content section-1">
      <u-cell-group>
        <u-cell-item
          title="用户服务与隐私政策"
          :border-bottom="false"
          @click="navigateTo('/pages/agree/index?title=隐私保护协议&type=1')"
        ></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return { version: '1.0.0' };
  },
  onLoad() {
    const accountInfo = uni.getAccountInfoSync();
    this.version = accountInfo.miniProgram.version || '-';
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx;
  text-align: center;
  background-color: #f5f5f5;
}

.content {
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
}

.section-0 {
  width: 100%;
  padding: 50rpx 30rpx;
  .logo {
    width: 141rpx;
    height: 141rpx;
  }
  .label {
    margin-top: 20rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
    line-height: 1;
    text-align: center;
  }
  .value {
    margin-top: 12rpx;
    font-size: 26rpx;
    font-weight: normal;
    color: #222222;
    line-height: 1;
    text-align: center;
  }
}

.section-1 {
  margin-top: 30rpx;
}
</style>
